<template>
    <div class="categorys">
    <!-- 按钮开始 -->
    <el-button @click="showHandler" style="background-color:#2cb5ac" size="small" type="primary">添加</el-button>
    <!-- 按钮结束 -->
    <!-- 表格开始 -->
    <el-table
      :data="categorys"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="编号"
        width="90px"
        align="center">
      </el-table-column>
      <el-table-column
        prop="name"
        label="名称"
        width="380px"
        align="center">
      </el-table-column>
       <el-table-column
      label="图标">
      <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
           <img width="90px" :src="scope.row.icon" alt="">
            <div slot="reference" class="name-wrapper">
               <img width="30px" :src="scope.row.icon" alt="">
            </div>
          </el-popover>
      </template>
    </el-table-column>
      <el-table-column
        prop="num"
        label="序号"
        align="center">
      </el-table-column>
      <el-table-column width="150px" label="操作" align="center">
      <template slot-scope="scope">
       <el-button @click="editHandler(scope.row)" size="mini" type="primary">编辑</el-button>
       <el-button @click="deleteHandler(scope.row.id); " size="mini" type="danger">删除</el-button>
      </template>
      </el-table-column>
    </el-table>
    <!-- 表格结束 -->
    <!-- 分页开始 -->
    <div class="paginnation">
        <el-pagination
        layout="prev, pager, next"
        :page-size = 'list.pageSize'
        :total="total"
        @current-change='changeHandler'>
      </el-pagination>
    </div>
      <!-- 分页结束 -->
      <!-- 模态框开始 -->
      <el-dialog :title="title" :visible.sync="dialogFormVisible">
        <!-- 表单开始 -->
      <el-form :rules="rules" :model="ruleForm"  ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="栏目名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="序号" prop="num">
          <el-input v-model="ruleForm.num"></el-input>
        </el-form-item>
        <el-form-item label="图标" prop="icon">
          <el-upload
            class="upload-demo"
            action="http://81.69.24.232/pet/jz_upload.php"
            multiple
            :limit="3"
            :on-success="successHandle">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>         
        </el-form-item>
      </el-form>
        <!-- 表单结束 -->
        <div slot="footer" class="dialog-footer">
          <el-button size="mini"  @click="dialogFormVisible = false">取 消</el-button>
          <el-button  size="mini" type="primary" style="background-color:#2cb5ac" @click="submitHandler">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 模态框结束 -->
      <!-- 提示开始 -->
       <!-- <el-button type="text" @click="open">点击打开 Message Box</el-button> -->
      <!-- 提示结束 -->
    </div>
</template>



<script>
import {mapState,mapActions} from 'vuex'
export default {
    data(){
        return{
         list:{
             page:1,
             pageSize:3
         },
         dialogFormVisible:false,
         ruleForm:{},
          rules: {
          name: [
            { required: true, message: '请输入栏目名称', trigger: 'blur' },
          ],
          icon: [
            { required: true,  trigger: 'blur' }
          ],
        },
        //  添加栏目信息
        title:'添加栏目信息'
        }
    },
    computed:{
        ...mapState('category',['categorys','total'])
    },
    methods:{
        ...mapActions('category',['findAllCategory','saveCategory','deleteCategory']),
        // 分页
        changeHandler(page){
           this.list.page = page,
           this.findAllCategory(this.list)
        },
        // 去添加栏目信息
        showHandler(){
          this.dialogFormVisible = true
        },
        // 提交保存
        submitHandler(){
          // console.log(this.ruleForm);
         this.saveCategory(this.ruleForm).then(res=>{
          //  console.log(res);
          if(res.status === 200){
            this.dialogFormVisible = false
            this.findAllCategory(this.list)
            this.$message({
              type:'success',
              message:res.message
            })
          }else{
            this.$message({
              type:'error',
              message:res.message
            })
          }
         })
        },
        // 编辑栏目信息
        editHandler(data){
        //  console.log(a);
        // 将当前行的内容赋值给ruleForm
         this.ruleForm = data,
         this.title = '编辑栏目信息'
        //  打开模态框
         this.dialogFormVisible = true
        },
        // 删除栏目信息
        deleteHandler(id){
        // alert(id)
        let params = {
          id
        }
        this.deleteCategory(params).then(res=>{
          if(res.status === 200){
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                this.findAllCategory(this.list)
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
              }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消删除'
                });          
              });
          }
        })
        },
      // 文件上传成功时
      successHandle(file){
       console.log(file);
      //文件上传成功，将拿到的图片地址，保存到我们栏目信息的对象中
       this.ruleForm.icon = file
      }
    },
    created(){
        this.findAllCategory(this.list)
    }
}
</script>
<style scoped lang="scss">
.paginnation{
    float: right;
}
</style>